<template>
  <el-card
    ref="test"
    id="card"
    :class="{
      'noPadding-box': border ? false : true,
    }"
    shadow="never"
  >
    <header
      :class="{
        top: true,
        topTitleLeft: topTitleLeft,
        noPadding: border ? false : true,
      }"
      :style="{ 'border-bottom': border ? ' 0.5px solid #dfe4ed' : '' }"
    >
      <div class="left">
        <h1>
          <span v-if="isleft" class="leftIcons"><slot name="left"></slot></span>
          <img :src="require('@/wss/assets/image/icon/cardLeft.png')" alt="" v-else/>
          <b>{{ title }}<slot name="title"></slot></b>
        </h1>
      </div>
      <div v-if="isright" class="right">
        <slot name="right"></slot>
      </div>
    </header>
    <div style="padding-top: 10px" :class="isScroll ? 'scroll' : ''">
      <slot></slot>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    // 标题是否靠左
    topTitleLeft: {
      type: Boolean,
      default: false,
    },
    // 是否需要下边线
    border: {
      type: Boolean,
      default: true,
    },
    // 是否再标题右边加东西
    isright: {
      type: Boolean,
      default: false,
    },
    // 是否再标题左边加东西 替换六个点
    isleft: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 是否需要滚动条
    isScroll: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.scroll {
  height: 100%;
  overflow-y: scroll;
}
::v-deep .el-card__body {
  padding: 30px;
  padding-top: 0px;
  // margin-bottom: 30px;
}
::v-deep .el-card__body div::-webkit-scrollbar-thumb {
  background-color: transparent;
}
::v-deep .el-card__body div:hover::-webkit-scrollbar-thumb {
  background-color: #eee;
}
::v-deep .el-card__body div::-webkit-scrollbar-track {
  background-color: #fff;
}

.el-card {
  border-radius: 12px;
  height: 100%;
}

.top {
  justify-content: space-between;
  display: flex;
  align-items: center;
  .left {
    flex: 1;
    align-items: center;
    h1 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      color: #2e3f5e;
      b{
        font-weight: 400;
      }
      img {
        width: 7px;
        margin-right: 13px;
      }
      .leftIcons{
        margin-right: 5px;
        cursor: pointer;
      }
    }
  }

  // display: flex;
  .card-icon {
    font-size: 15px;
    margin-right: 5px;
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;

    // flex: 1;
  }
}

.topTitleLeft {
  justify-content: start;

  .left {
    flex: initial;
    margin-right: 30px;
  }
}
// .top::after {
//   content: "";
//   height: 0.5px;
//   background-color: #dfe4ed;
//   display: block;
//   width: 100%;
// }
.noPadding-box {
  ::v-deep .el-card__body {
    padding-bottom: 0px;
  }
}
.noPadding {
  padding-bottom: 0px;
  // margin-top: 10px;
  .left {
    flex: unset !important;
  }
}

@media (max-width: 1120px) {
  .top .left h1{
    font-size: 16px;
  }
}
</style>
